<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "" "">
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
	renderKitId="AJAX">
	<w:head cache="false">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<w:stylesheet src="/css/kmp4.css" type="text/css"></w:stylesheet>
		<w:script src="/javascript/k4.js" type="text/javascript" language="UTF-8"></w:script>
		<w:script src="/javascript/selectComponent.js" type="text/javascript" language="UTF-8"></w:script>
	</w:head>
	<w:page title="角色分配用户">
		<layout:borderLayout fitToBody="true" border="false" fit="true" margins="0 0 0 0">
			<layout:panel region="west" border="false" height="280" width="170">
				<w:form id="setUserRole">
					<layout:panelGrid columns="3">
						<layout:cell style="width:250px;">
							<fieldset style="width: 200px; border: 0;">
							<legend>已分配用户</legend> <h:selectManyListbox size="20" style="width: 150px;" id="usersOfRole"
								ondblclick="javascript:removeUser(this,this.value);">
								<f:selectItems value="#{system_editRoleUserBean.roleUsers}" />
							</h:selectManyListbox>
							</fieldset>
						</layout:cell>

					</layout:panelGrid>
				</w:form>
			</layout:panel>
			<layout:panel region="center" border="false" height="280" autoScroll="false" width="50">
				<div style="height: 35px;"></div>
				<layout:panelGrid columns="1" align="center" style="height:100%;">
					<layout:cell width="30" align="center">
						<w:button label="&lt;&lt;" onclick="javascript:selectManeyUser();" alwaysSubmit="false"
							tooltip="右边选中人员左移" />
						<w:separator />
						<w:button label="&gt;&gt;" onclick="javascript:removeManeyUser();" alwaysSubmit="false"
							tooltip="左边选中人员移除" />
					</layout:cell>
				</layout:panelGrid>
			</layout:panel>
			<layout:panel region="east" border="false" height="280" width="200" autoScroll="false">
				<w:form id="submitForm" onsubmit="return submitForm();">
					<layout:cell style="width:5px;">
						<input type="hidden" id="selectedRoles" name="selectedRoles"></input>
					</layout:cell>
					<layout:cell style="width:250px;">
						<fieldset style="width: 200px; border: 0;">
						<h:panelGrid columns="1" cellspacing="0">
							<h:panelGroup>
								<h:inputText id="prefix" value="#{system_editRoleUserBean.prefix}"
									valueChangeListener="#{system_editRoleUserBean.prefixChanged}"
									style="width: 120px;">
									<ajax:action event="onkeyup" />
								</h:inputText>
								<h:outputLabel for="prefix" value="搜索用户" />
							</h:panelGroup>
							<h:panelGroup>
								<h:selectManyListbox size="20" style="width: 150px" value="111" id="rightSelect"
									ondblclick="javascript:selectUser(this);">
									<f:selectItems value="#{system_editRoleUserBean.filteredUsers}" />
								</h:selectManyListbox>
							</h:panelGroup>
						</h:panelGrid>
						</fieldset>
					</layout:cell>
					<layout:cell colspan="3" align="center">
						<layout:panelGrid columns="2">
							<layout:cell>
								<w:button label="保存" id="saveUserRole" immediate="true" image="/images/save.gif" />
							</layout:cell>
							<layout:cell>
								<w:button label="重置" onclick="javascript:window.location.reload();" immediate="true"
									alwaysSubmit="false" image="/images/clear.gif" />
							</layout:cell>
						</layout:panelGrid>
					</layout:cell>
				</w:form>
			</layout:panel>
		</layout:borderLayout>
	</w:page>
	<script>
	//<![CDATA[
	//选择用户
	function selectUser(selectObj){
		//alert('value is:'+value);
		//alert(value.value);
		//alert(value.options[value.selectedIndex].text);
		var value=selectObj.value;
		var text=selectObj.options[selectObj.selectedIndex].text;
		var roleUsers=document.getElementById("setUserRole:usersOfRole");
		//alert(roleUsers);
		addValue(roleUsers,value,text);
	}
	//删除用户
	function removeUser(objSelect,value){
		//alert(objSelect);
		for (var i = 0; i < objSelect.options.length; i++) {    
            if (objSelect.options[i].value == value) {    
                objSelect.remove(i);
                break;
            }
        }
	}
	
	function selectManeyUser(){
	    var selectObjs=document.getElementById("submitForm:rightSelect");
	    var roleUsers=document.getElementById("setUserRole:usersOfRole");
	   
	    var length = selectObjs.options.length - 1;    
    	for(var i = length; i >= 0; i--){    
        	if(selectObjs[i].selected == true){    
           	  addValue(roleUsers,selectObjs[i].value,selectObjs.options[i].text);
        	}    
    	}    
	}
	//删除选中的用户
	function removeManeyUser(){
          var roleUsers=document.getElementById("setUserRole:usersOfRole");
          var length = roleUsers.options.length - 1;   
    		for(var i = length; i >= 0; i--){    
        	if(roleUsers[i].selected == true){    
           	 roleUsers.remove(i);
        	}    
    	}    
	}
	function addValue(selctObject,value,text){
		var isDup=false;
		for(var i=0;i<selctObject.length;i++){
		var opValue=selctObject.options[i].value;
		  if(opValue==value){
		       isDup=true;
		  }
		}
		if(!isDup){
		     var newValueOption=document.createElement("OPTION");
		     newValueOption.setAttribute("value",value);
		     newValueOption.text=text;
		     selctObject.options.add(newValueOption);
		}
	}
	function submitForm(){
		var roles=document.getElementById("selectedRoles");
		var roleUsers=document.getElementById("setUserRole:usersOfRole");
		var result="";
		for(var i=0;i<roleUsers.options.length;i++){
			result=roleUsers.options[i].value+','+result;
		}
		if(result.length>0){
			result=result.substring(0,result.length-1);
		}
		roles.value=result;
		return true;
	}
	//]]></script>
</f:view>